
<!DOCTYPE html>
<html lang="ru">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Шапка сайта с логотипом и меню</title>
   <!-- Подключаем через Google Fonts шрифт Montserrat. Ссылка для выбора шрифта: https://fonts.google.com/ -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"rel="stylesheet"/>
   <!-- нормализация стилей -->
    <link rel="stylesheet" href="/styles/normalize.css">
   <!-- Подключаем файл со стилями -->
   <link rel="stylesheet" href="styles/style.css"/>

 </head>
 <body>
   <!-- Добавляем шапку сайта -->
   <header class="header">
     <!-- Добавляем контейнер -->
     <div class="container">
       <!-- Добавляем внутреннюю обёртку для выравнивания логотипа и меню -->
       <div class="header__inner">
         <!-- Создаём логотип сайта -->
         <a class="logo" href="#"><img src="/images/logo.png" alt="logo" id="logo"></a>
         <!-- Cоздаем input для поиска-->
          <form class="search">
            <input class="search__input" type="text" placeholder="Поиск">
            <button class="search__button" type="submit">
              <img src="/images/search-svgrepo-com.svg" alt="search">
            </button>
          </form>
         <!-- Cоздаем input для поиска-->
         <!-- С помощью списка создаём навигационное меню -->
         <nav class="menu">
           <ul class="menu__list">
             <li class="menu__list-item">
                <figure class="figure">
                    <a class="menu__list-link" href="#">
                     <img src="/images/diagnosis-svgrepo-com.svg" alt="create-post">
                     <figcaption>Сделать пост</figcaption>
                    </a>
                 </figure>
             </li>
             <li class="menu__list-item">
                <figure class="figure">
                    <a class="menu__list-link" href="#">
                     <img src="/images/heart-svgrepo-com.svg" alt="like">
                     <figcaption>Понравилось</figcaption>
                    </a>
                 </figure>
             </li>
             <li class="menu__list-item">
                <figure class="figure">
               <a class="menu__list-link" href="#">
                <img src="/images/record-svgrepo-com.svg" alt="subscribe">
                <figcaption>Подписки</figcaption>
               </a>
            </figure>
             </li>
             <li class="menu__list-item">
                <figure class="figure">
               <a class="menu__list-link" href="#">
                <img src="/images/personal-account-account-svgrepo-com.svg" alt="profile">
                <figcaption>Профиль</figcaption>
            </figure>
            </a>
             </li>
           </ul>
         </nav>
       </div>
     </div>
   </header>

   <!-- Место для основного контента на сайте -->
 </body>
</html>